<template>
  <div v-if="appearance.value.length">
    <div class="info-form-group" v-for="(item, index) in appearance.value" :key="`images_${index}`">
      <div class="info-form-group-title mb30">{{ item.name }}</div>
      <div class="info-form-group-content fr1">
        <Upload
          height="290"
          v-model:list="item.productDataList"
          :is-read-only="item.value == 0"
          :type="(item.productDataList && item.productDataList[0]?.type) || 3"
          :category="item.parentId"
          :category-sub="item.id"
          :accept="acceptConst[(item.productDataList && item.productDataList[0]?.type) || 3]"
          :is-edit="isEdit"
        >
          <template #default="{ scope, event }">
            <div class="custom-image-wrap">
              <div class="custom-image mb10">
                <div
                  class="d-upload-add"
                  v-if="scope.fixed && !scope.path"
                  :class="{ 'no-allow': !isEdit }"
                  @click="
                    () => {
                      isEdit ? event() : '';
                    }
                  "
                >
                  <el-icon v-if="isEdit"><Plus /></el-icon>
                  <span style="color: #999999" v-else>暂无数据</span>
                </div>
                <el-image
                  v-else-if="scope.type == 1"
                  style="width: 100%; height: 100%"
                  :src="scope.previewLink"
                  :preview-src-list="[scope.previewLink]"
                  :initial-index="1"
                />
                <!-- <img v-else-if="scope.type == 1" :src="urlResource + scope.path" alt="" /> -->
                <video v-else width="100%" height="100%" controls preload="metadata">
                  <source :src="`${scope.previewLink}#t=1`" type="video/mp4" />
                </video>
              </div>
              <div class="upload-text">
                <el-input
                  :disabled="scope.fixed"
                  type="textarea"
                  :rows="1"
                  v-model="scope.remark"
                  placeholder="请填写"
                  clearable
                  resize="none"
                ></el-input>
              </div>
            </div>
          </template>
        </Upload>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="Shape">
import { inject } from "vue";
import { useUtils } from "../../hooks/useUtils";
import Upload from "../../Upload.vue";
// 变量
const { acceptConst } = useUtils();
const props = defineProps({
  appearance: {
    type: Array,
    default: () => []
  }
});
console.log(props.appearance.value);
// const urlResource = inject("urlResource");
const isEdit = inject("isEdit");
</script>
<style lang="scss" scoped>
:deep(.no-allow) {
  cursor: not-allowed !important;
}
</style>
